<!--
 * @Author: mayijun
 * @Date: 2022-06-20 16:43:59
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-09 16:49:39
-->
<script lang="ts">
export default { name: 'BusinessLine' };
</script>
<script lang="ts" setup>
import { PropType, reactive, ref, watch } from 'vue';
import BusinessLineItem from '../businessLineItem/index.vue';
import plus from '@/assets/images/plus.svg';
import minus from '@/assets/images/minus.svg';
import _ from 'lodash';
import { IBusinessLimit } from '@/constants/indexDevelop';
import { useRoute } from 'vue-router';
import { IconDown } from '@arco-design/web-vue/es/icon';

let props = defineProps({
  businessLimit: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    }
  },
  modelTableColumnList: {
    type: Array,
    default: () => []
  },
  isBusinessLineSelect: {
    type: Boolean,
    default: false
  },
  treeMax: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    }
  }
});

let emit = defineEmits([
  'removeNode',
  'addNode',
  'update:isBusinessLineSelect'
]);

const route = useRoute();
//上线状态
let status = ref<any>(route.query.status);

let state = reactive({
  options: [
    { label: 'and', value: 'and' },
    { label: 'or', value: 'or' }
  ]
});

// 删除节点
const removeNode = (index: number) => {
  //判断节点是否多个
  if (props.businessLimit.children.length > 1) {
    props.businessLimit.children.splice(index, 1);
  } else {
    props.businessLimit.children = [];
    props.businessLimit.type = '';
    //判断是否根节点
    if (props.businessLimit.isRoot) {
      emit('update:isBusinessLineSelect', false);
    }
  }
};

// 添加节点,
const addNode = (addType?: number) => {
  let node: IBusinessLimit = {
    countTypeDto: {
      begin: 0,
      countType: 0,
      countWay: '',
      end: 0,
      filterValue: ''
    } as defs.CountTypeDto,
    tableFieldColumn: '',
    tableFieldName: '',
    type: '',
    isRoot: false,
    compontType: 2,
    children: []
  };

  //添加选项是2
  if (addType == 2) {
    //判断是否多个
    if (props.businessLimit.children.length > 0) {
      //判断子是组件还是选项
      let compontType = props.businessLimit.children[0].compontType;
      if (compontType == 2) {
        props.businessLimit.type = props.businessLimit.type || 'and';
        props.businessLimit.children.push(node);
      } else {
        //添加新的平级
        let newNode: any = _.cloneDeep(node);
        node.compontType = 1;
        node.children?.push(newNode);
        props.businessLimit.children.push(node);
      }
    } else {
      props.businessLimit.children = [node];
      props.businessLimit.compontType = 2;
    }
  } else {
    //添加新的平级
    let newNode: any = _.cloneDeep(node);
    node.compontType = 1;
    node.children?.push(newNode);
    if (props.businessLimit.isRoot) {
      //添加下级,同时创建一个新的平级
      let childNode = _.cloneDeep(props.businessLimit);
      childNode.compontType = 1;
      childNode.isRoot = false;
      props.businessLimit.children = [childNode, node];
      props.businessLimit.type = 'and';
      props.businessLimit.compontType = 2;
      props.businessLimit.isRoot = true;
      //最大层级叠加
      props.treeMax.num++;
    } else {
      props.businessLimit.children.push(node);
    }
  }
  console.log(props.businessLimit);
};
//配合删除，监控父节点
watch(
  () => props.businessLimit.children,
  () => {
    if (
      props.businessLimit.children &&
      props.businessLimit.children.length > 0 &&
      props.businessLimit.compontType == 2
    ) {
      let childArray = _.cloneDeep(props.businessLimit.children);
      let newArray: any[] = [];
      let isMinus = false;
      childArray.map((item: any) => {
        if (item.compontType == 1 && item.children.length > 0) {
          newArray.push(item);
        } else if (item.children.length == 0) {
          isMinus = true;
        }
      });
      if (isMinus && newArray.length > 1) {
        props.businessLimit.children = newArray;
      } else if (isMinus && newArray.length == 1) {
        //如果只有一个子，当他等于平级
        props.businessLimit.children = newArray[0].children;
        //同时减去一个层级
        props.treeMax.num--;
      }
    }
  },
  { deep: true }
);
</script>
<template>
  <div class="add-btn-div" v-show="!props.isBusinessLineSelect">
    <a-button
      :disabled="status == 1"
      type="text"
      @click="
        () => {
          addNode(2);
          emit('update:isBusinessLineSelect', true);
        }
      "
    >
      <img :src="plus" />
    </a-button>
  </div>
  <ul v-show="props.isBusinessLineSelect" class="tree-node-div">
    <li
      :class="[
        'logical-wrapper',
        props.businessLimit.compontType == 1 ? 'logical-min' : ''
      ]"
    >
      <div
        class="border-level border-right"
        v-if="
          props.businessLimit.children &&
          props.businessLimit.children.length > 1 &&
          props.businessLimit.compontType == 2
        "
      ></div>
      <div
        :class="[
          'condition-select',
          props.businessLimit.compontType == 1 ? 'condition-select-left' : ''
        ]"
        v-if="
          props.businessLimit.children &&
          props.businessLimit.children.length > 1
        "
      >
        <a-select
          size="mini"
          v-model="props.businessLimit.type"
          :disabled="status == 1"
        >
          <a-option
            v-for="item in state.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></a-option>
          <template #arrow-icon>
            <icon-down />
          </template>
        </a-select>
        <!-- 目前控制最大层级2级 -->
        <a-button
          :disabled="status == 1"
          type="text"
          @click="addNode()"
          v-if="
            props.businessLimit.compontType == 2 &&
            ((props.businessLimit.isRoot && props.treeMax.num == 1) ||
              (props.treeMax.num < 2 && !props.businessLimit.isRoot))
          "
        >
          <img :src="plus" />
        </a-button>
      </div>
      <div
        :class="[
          'border-level',
          props.businessLimit.compontType == 1 ? 'border-right' : ''
        ]"
        v-if="
          props.businessLimit.children &&
          props.businessLimit.children.length > 0
        "
      ></div>
    </li>
    <li class="condition-block">
      <ul :class="['tag-item-wrap']">
        <li
          class="node-group-item"
          v-for="(item, index) in props.businessLimit.children"
          :key="index"
        >
          <BusinessLine
            v-if="item.compontType == 1"
            :businessLimit="item"
            :isBusinessLineSelect="true"
            :modelTableColumnList="props.modelTableColumnList"
          />
          <BusinessLineItem
            v-if="item.compontType == 2"
            :modelTableColumn="props.modelTableColumnList"
            :businessLimit="item"
            :key="Math.random()"
          ></BusinessLineItem>

          <a-button
            :disabled="status == 1"
            v-if="item.compontType == 2"
            type="text"
            @click="removeNode(index)"
          >
            <img :src="minus" />
          </a-button>
        </li>
      </ul>
      <a-button
        type="text"
        @click="addNode(2)"
        :disabled="status == 1"
        :class="[props.businessLimit.children.length > 0 && props.businessLimit.children[0].compontType == 1 ? 'parent-btn' : '']"
      >
        <img :src="plus" />
      </a-button>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>